<template>
  <div>
  <el-form>
    <el-input type="text" placeholder="请输入部门进行查询" v-model="name"
              style="width: 200px;margin-top:20px;margin-bottom: 20px;margin-left: 20px">
    </el-input>
    <el-button type="info" plain style="border-left: hidden;height: 40px" icon="el-icon-search" @click="findByName">
    </el-button>
    <el-button type="success" icon="el-icon-circle-plus-outline" style="margin-left: 20px">添加</el-button>
    <el-button type="info" icon="el-icon-download">导出</el-button>
  </el-form>
  <el-table
    :data="tableData"
    border
    style="width: 100%;margin-left: 20px">
    <el-table-column
      label="ID"
      width="50"
      prop="id">
    </el-table-column>
    <el-table-column
      label="办公电话"
      width="180"
      prop="phone"
    ></el-table-column>
    <el-table-column
      label="部门名"
      width="100"
      prop="name">
    </el-table-column>
    <el-table-column
      label="人数"
      width="100"
      sortable>
      <template slot-scope="scope">
        <el-tag
          type="warning"
          effect="plain"
          corlor="green" style="margin-left: 20px">
          {{ scope.row.count1==null?'0':scope.row.count1 }}人
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="创建时间"
      width="180"
      sortable>
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="修改时间"
      width="180"
      sortable>
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.modifiedTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="部门主任"
      width="130"
      prop="nickname"
    >
    </el-table-column>
    <el-table-column
      label="地址"
      width="200"
      prop="address"
    >
    </el-table-column>
    <el-table-column label="操作" >
      <template slot-scope="scope">
        <el-button style="margin-left: 20px"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
          size="mini"
          type="danger"
          disabled
          @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="block" style="margin-top: 30px">
      <el-pagination
        style="margin-left: 20px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {findByDepPage} from '@/api/department';
  export default {
    data() {
      return {
        total:0,
        size:5,
        current:1,
        name:null,
        tableData: []
      }
    },
    methods: {
      //查询按钮
      findByName(){
        this.findByDepPageVo(1,5,this.name)
      },
      handleSizeChange(val) {
        this.findByDepPageVo(this.current,val,this.name)
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.findByDepPageVo(val,this.size,this.name)
        console.log(`当前页: ${val}`);
      },
      //编辑
      handleEdit(index, row) {
        console.log(index, row);
      },
      //删除
      handleDelete(index, row) {
        console.log(index, row);
      },
      //部门信息展示
      findByDepPageVo(current,size,name){
        var $this=this;
        findByDepPage(current,size,name).then(res=>{
          //alert(JSON.stringify(res.data.department))
          $this.tableData=res.data.department;
          $this.total=res.data.total;
          $this.size=res.data.size;
          $this.current=res.data.current;
        }).catch(error=>{
          alert(error)
        });
      }
    },
    created() {
      this.findByDepPageVo(this.current,this.size,this.name)
    }
  }
</script>

<style scoped>

</style>
